<!-- 固定在屏幕底部的按钮组件  注：此组件默认高度是 113rpx -->
<template>
	<view :class="[fixed ? 'btn-box' : '']" :style="{zIndex: zIndex}">
		<view class="btn"><u-button :custom-style="btnStyle" :hair-line="false" @click="btnClick">{{text}}</u-button></view>
	</view>
</template>

<script>
	export default {
		name:"my-bottom-btn",
		props: {
			// 是否使用固定定位，默认使用的是固定定位
			fixed: {
				type: Boolean,
				default: true,
			},
			text: {
				type: String,
				default: '按钮'
			},
			zIndex: {
				type: Number,
				default: 9
			}
			
		},
		data() {
			return {
				btnStyle: {
					width: '700rpx',
					height: '88rpx',
					background: '#32C57B',
					borderRadius: '44rpx',
					fontSize: '32rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#FFFFFF',
					border: 'none'
				}
			};
		},
		methods: {
			btnClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 113rpx;
		padding-bottom: 25rpx;
		background-color: $bgc;
		.btn {
			margin: 0 auto;
		}
		
	}
</style>
